<template>
    <ul class="nav">
        <li v-for="item in frameRoutes" @click="itemClickHandler(item.path)" :class="{active:route.name === item.name}">
            <img :src="'./icons/'+item.name+'.png'">
            <span>{{item.title}}</span>
        </li>
    </ul>
</template>

<script setup>
    import {frameRoutes} from "../router/index";
    import {useRouter, useRoute} from 'vue-router';
    const route = useRoute()
    const router = useRouter();
    function itemClickHandler(path) {
        router.push(path)
    }


</script>

<style scoped lang="less">
    .nav {
        position: fixed;
        bottom: 0.2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        font-size: 0.14rem;
        li {
            background-color: #1f2e30;
            border-radius: 0.05rem;
            cursor: pointer;
            margin: 0 0.1rem;
            padding: 0.1rem 0.15rem;
            display: flex;
            align-items: center;
            border: 0.02rem solid transparent;
            &.active{
                border: 0.02rem solid #4a919b;
                background-color: #2d5157;
            }
            img {
                width: 0.2rem;
                height: 0.2rem;
                margin: 0 0.1rem;
            }
        }
    }
</style>